
import React from 'react';
import { Row, Col, Table, Spin, Button, DatePicker, Pagination, Tabs, message, Modal, Form, Input, Select, Icon } from 'antd';
import { connect } from 'dva';
import Text from './Text'
const FormItem = Form.Item;
const confirm = Modal.confirm;
import moment from "moment";
const Option = Select.Option;
import styles from './biaodan.less';

@connect(({ biaodan, loading }) => ({
	loading: loading.models.biaodan, //预加载用的 配合antd的spin使用
	...biaodan,
}))
class Biaodan extends React.PureComponent {
	constructor(props) {
		super(props);
		//state
		this.state = {
			visible: false,
			changeMake: {}
		};
	}

	//用来保存数据的方法
	changeMake = (value, keyWord) => {
		if (keyWord == 'name') {
			//select可以直接取值，但是input的值在value.target.value里
			value = value.target.value
		} else if (keyWord == 'time'){
			value=value.format('YYYY-MM-DD')
		}
		//存值 this.state取值
		let { changeMake } = this.state
		changeMake[keyWord]= value
		this.setState({
			changeMake
		})
		//给综合传值
		let all = (changeMake.name ? changeMake.name : '' )+ (changeMake.pass ? changeMake.pass : '') + (changeMake.time ? changeMake.time:'')
		
		this.setState({ 
			'all':all
		 })
		 //给表单添加all
		this.props.form.setFieldsValue({ 'all': all})
    
	}
	//禁用不可选的时间
	disabledDate = (current) => {
		//不能选之后或者之前的月份
		return current.month() > moment().month() || current.month() < moment().month()
	}
	//提交
	pushOn = () => {
		let { changeMake } = this.state
		//验证非空
		this.props.form.validateFields((errors,value) => {
			console.log(errors)
			console.log(value)
			if (!errors) {
				this.props.dispatch({
					type: 'biaodan/holdThis',
					changeMake
				})
			}
		})
	}
	//清空
	clear = () => {
		//清空表单 清空后恢复为各项的initialValue
		this.props.form.resetFields();
		//清空state
		this.setState({
			changeMake:{}
		})
	}
	/**
		 * 手写验证
		 * @param rule 验证规则
		 * @param value 值
		 * @param callback 回调函数
		 */
	
	validFunction = (rule, value, callback) => {
		if (value == 'Invalid date') {
			callback('必填')
		} else {
			callback()
		}
	}
	/*  */
	render() {
		//从models取值
		const { dataList } = this.props;
		//从state取值
		const { changeMake } = this.state
		//用来放每一项的api的
		const { getFieldDecorator } = this.props.form;
		//RowCol和form表单格式
		const FormItemCol = {
			preCol: { span: 10 },
			latCol: { span: 20 }
		};
		const formItemLayout = {
			labelCol: { span: 10 },
			wrapperCol: { span: 14 },
			style: { marginBottom: 5 }
		};
		//将select需要的数组或者对象遍历成选项格式
		const number_List = dataList.map((item, index) => {
			return (
				<Option value={item} key={index} title={item}>{item}</Option>
			)
		});
		//时间格式
		const dateFormat = 'YYYY-MM-DD';
		return (
			//预加载
			<Spin spinning={this.props.loading}>
				{/* 引入样式 这里是最基础的白色背景 */}
				<div className={styles.backG}>
					<Button type="primary" style={{marginRight:15}} onClick={() => this.pushOn()}>提交</Button>
					<Button type="primary" onClick={() => this.clear()}>清空</Button>
					<Row gutter={16}>
						<Col {...FormItemCol.preCol}>
							<FormItem label="姓名" {...formItemLayout} >
								{getFieldDecorator('name', {
									rules: [{
										required: true, //true为验证 false
										message: '必填',
										whitespace: true,
									}],
									initialValue: '' //这里是预设值
								})(
									<Input
										onChange={(e) => this.changeMake(e, 'name')}
										placeholder={'请输入'}
									/>
								)}
							</FormItem>
						</Col>
						<Col {...FormItemCol.preCol}>
							<FormItem label="密码" {...formItemLayout} >
								{getFieldDecorator('pass', {
									rules: [{
										required: true, //true为验证 false
										message: '必填',
										whitespace: true,
									}],
									initialValue: [] //这里是预设值 select在预设为空数组时才展示placeholder
								})(
									<Select
										onChange={(e) => this.changeMake(e, 'pass')}
										style={{ width: 100 }}
										placeholder={'请选择'}
									>
										{number_List}
									</Select>
								)}
							</FormItem>
						</Col>
					</Row>
					<Row gutter={16}>
						<Col {...FormItemCol.preCol}>
							<FormItem label="日期" {...formItemLayout} >
								{getFieldDecorator('time', {
									rules: [{
										required: true, //true为验证 false
										message: '必填',
										whitespace: true,
										//时间需要手动转译一下
										transform: (value) => {
											return moment(value).format("YYYY-MM-DD")
										}
									}, {
										//日期的form取值有点问题，需要手动验证
										validator: this.validFunction
									}],
									initialValue: changeMake.time ? moment(changeMake.time) : null
								})(
									<DatePicker
										disabledDate={this.disabledDate}
										onChange={(e) => this.changeMake(e, 'time')}
										format={dateFormat}
										style={{ width: '100%' }}
									/>
								)}
							</FormItem>
						</Col>
						<Col {...FormItemCol.preCol}>
							<FormItem label="综合" {...formItemLayout} >
								{getFieldDecorator('all', {
									rules: [{
										required: true, //true为验证 false
										message: '必填',
										whitespace: true,
									}],
									initialValue: ''
								})(
									<Input
										readOnly="readOnly"   //只读
										placeholder={'请输入'}
									/>
								)}
							</FormItem>
						</Col>
					</Row>
					
				</div>
				<Text b="a1"/>

			</Spin>
		);
	}
}
//Form.create是引入form的方法 放在this.props.form里
export default Form.create()(Biaodan);
